<template>
  <div class="comment-form">
    <h3>添加短评</h3>
    <div class="form-content">
      <!-- 观看状态选择 -->
      <div class="watch-status">
        <input type="radio" id="want-watch" name="watchType" />
        <label for="want-watch">想看</label>
        <input
          type="radio"
          id="watched"
          name="watchType"
          style="margin-left: 15px"
        />
        <label for="watched">看过</label>
      </div>

      <!-- 评分 -->
      <div class="rating">
        <span>给个评价吧</span>
        <span class="stars">⭐⭐⭐⭐⭐</span>
      </div>

      <!-- 标签输入 -->
      <div class="tags-section">
        <span>标签(多个标签用空格分隔)</span><br />
        <input type="text" class="tag-input" placeholder="输入标签" />
      </div>

      <!-- 已选标签 -->
      <div class="selected-tags">
        <span>我的标签:</span>
        <span class="tag-item">玄幻</span>
        <span class="tag-item">武侠</span>
        <span class="tag-item">仙侠</span>
      </div>

      <!-- 评论内容 -->
      <div class="comment-input">
        <p>简短评论</p>
        <input type="text" placeholder="要求350字以内" class="comment-text" />
      </div>

      <!-- 隐私设置 -->
      <div class="privacy-setting">
        <input type="checkbox" id="private" />
        <label for="private">仅自己可见</label>
      </div>

      <!-- 分享与保存 -->
      <div class="action-buttons">
        <span>分享到</span>
        <input type="text" class="share-input" placeholder="我的广播" />
        <a href="http://weibo.com" class="weibo-link">去绑定新浪微博</a>
        <button @click="addping" class="save-btn">保存</button>
      </div>
    </div>
    <!-- 用来接收父组件传来的数据 -->
    <div>
      <p>{{ username }}</p>
      <p>{{ content }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "ZuoVue",

  props: ["username", "content"],

  data() {
    return {};
  },
  mounted() {},
  methods: {
    addping() {
      const news = {
        username: this.username,
        content: this.content,
      };
      this.$emit("event", news);
    },
  },
};
</script>
<style lang='less' scoped>
.comment-form {
  width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 6px;
}

.form-content {
  margin-top: 15px;
  line-height: 1.8;
}

.watch-status {
  margin-bottom: 15px;
}

.rating {
  margin: 15px 0;
  color: #666;
  .stars {
    color: #ffcc00;
    margin-left: 8px;
  }
}

.tags-section {
  margin: 15px 0;
  .tag-input {
    width: 300px;
    padding: 6px 8px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
}

.selected-tags {
  margin: 10px 0 20px;
  .tag-item {
    display: inline-block;
    background: #f5f5f5;
    padding: 3px 10px;
    border-radius: 12px;
    margin-right: 8px;
    font-size: 12px;
  }
}

.comment-input {
  margin: 15px 0;
  .comment-text {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
  }
}

.privacy-setting {
  margin: 15px 0;
  color: #666;
}

.action-buttons {
  margin: 20px 0;
  .share-input {
    width: 180px;
    padding: 6px 8px;
    margin: 0 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .weibo-link {
    color: #e6162d;
    margin: 0 15px;
    text-decoration: none;
  }
  .save-btn {
    background: #0078d7;
    color: white;
    border: none;
    padding: 6px 18px;
    border-radius: 4px;
    cursor: pointer;
  }
}
</style>